<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>雨水</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            position: relative;
            width: 100%;
            height: 100vh;
        }

        .rain {
            position: absolute;
            width: 20px;
            height: 2px;
            background-image: linear-gradient(to right, white, black);
            border-radius: 0 45% 45% 0;
            left: 0;
            top: 0;
        }

        .wall {
            cursor: default;
            position: absolute;
            width: 80px;
            height: 300px;
            background-color: bisque;
            left: 100px;
            top: 100px;
            z-index: 100;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>

<body>
    <div class="wall"></div>
    <script>
        var score = 1000;
        var speed = 30;
        var wall = document.getElementsByClassName("wall")[0];
        var wallStyle = getComputedStyle(wall,null);
        function mousemove(e) {
            var wallAll = getComputedStyle(wall, null);
            wall.style.left = e.clientX - parseInt(wallAll.width) / 2 + "px";
            wall.style.top = e.clientY - parseInt(wallAll.height) / 2 + "px";
        }
        wall.addEventListener('mousedown', function (e) {
            e.preventDefault();
            window.addEventListener('mousemove', mousemove, false)
        }, false);
        window.addEventListener('keydown', function (e) {
            switch (e.keyCode) {
                case 87:
                    console.log("w");
                    break;
                case 83:
                    console.log("s");
                    break;
                case 65:
                    console.log("a");
                    break;
                case 68:
                    console.log("d");
                    wall.style.left = parseInt(wallStyle.left)+10 + "px";
                    break;
            }
        })
        window.addEventListener('mouseup', function (e) {
            window.removeEventListener('mousemove', mousemove);
        }, false)
        setInterval(function () {
            if (document.getElementsByTagName("div").length > 100) return;
            var rain = document.createElement("div");
            rain.classList.add("rain");
            var cat = Math.floor(Math.random() * (parseInt(getComputedStyle(document.body, null).height)));
            rain.style.opacity = Math.random().toFixed(1);
            rain.style.top = cat + "px";
            var time = setInterval(function () {
                rain.style.left = parseInt(getComputedStyle(rain, null).left) + speed + "px";
                if (parseInt(getComputedStyle(rain, null).left) >= (parseInt(getComputedStyle(document.body, null).width) - 20)) {
                    rain.parentNode.removeChild(rain);
                    clearInterval(time);
                }
                var rainAll = getComputedStyle(rain, null);
                var wallAll = getComputedStyle(wall, null);
                //碰撞处理
                if ((parseInt(rainAll.left) >= parseInt(wallAll.left) && (parseInt(rainAll.top) <= parseInt(wallAll.top) + parseInt(wallAll.height)) && (parseInt(rainAll.top) >= parseInt(wallAll.top)))) {
                    if (score < 0) score = 1000;
                    wall.innerHTML = `(拖拽)<br>耐久:${--score}`
                    rain.parentNode.removeChild(rain);
                    clearInterval(time);
                }
            }, 10)
            document.body.appendChild(rain);
        }, 10)
    </script>
</body>

</html>